<template>
     <NavBar :title="$t('option.whatIsOptionTrading')" :fontSize="16" />
        <div class="container">
            <img class="banner" src="@/assets/images/trend.svg" alt="">
            <div class="desc-info">{{$t('option.whatIsOptionTradingDesc')}}</div>
            <div class="title l-text-gradient">{{$t('home.ADVANTAGES')}}</div>
            <div class="desc">{{$t('option.benefitsOfTradingOptions')}}</div>
            <!-- advantage -->
            <div class="advantage">
                <div class="advantage_list">
                    <div class="advantage_list_item" v-for="(item,index) in advantageList" :key="index">
                        <div class="advantage_list_item_title l-f">
                            <img class="advantage_list_item_title_icon" src="@/assets/icons/icon-advantage.svg" />
                            <p class="advantage_list_item_title_label">{{item.title}}</p>
                        </div>
                        <p class="advantage_list_item_desc">{{item.desc}}</p>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

import NavBar from '@/components/navBar/index.vue'
import Footer from '@/components/footer/index.vue'

const { t } = useI18n()
const advantageList = computed(() => {
        return [
            {
                title: t('option.multipleExpiryTimes'),
                desc: t('option.multipleExpiryTimesDesc'),
            },
            {
                title: t('option.realTimeQuotes'),
                desc: t('option.realTimeQuotesDesc'),
            },
            {
                title: t('option.lowTransactionCosts'),
                desc: t('option.lowTransactionCostsDesc'),
            },
            {
                title: t('option.betterConfidentiality'),
                desc: t('option.betterConfidentialityDesc'),
            }
        ]
    })
   
</script>

<style lang="scss" scoped>
@import url("./index.scss");
</style>